<template>
  <div class="overview-info">
    <split-line text="事件概况" icon @iconclick="showEventList" />
    <a-row type="flex" :gutter="10">
      <a-col v-for="(item, index) of generalList" :key="item.key" :span="index >= 4 ? 12 : 6" class="flex-box">
        <corner-border-box v-bind="Object.assign({}, item.event)">
          <div class="con-center">
            <div>
              <p class="value" :style="{ color: item.color }">{{ data[item.key] || 0 }}</p>
              <p class="name">{{ item.name }}</p>
            </div>
          </div>
        </corner-border-box>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import SplitLine from '@/components/split-line.vue';
import CornerBorderBox from '@/components/corner-border-box.vue';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';

export default {
  name: 'overview-info',
  components: { SplitLine, CornerBorderBox },
  data() {
    return {
      generalList: [
        {
          name: '待处理',
          key: 'dcl',
          value: 0,
          color: '#FCB720',
        },
        {
          name: '处理中',
          key: 'clz',
          value: 0,
          color: '#63E461',
        },
        {
          name: '待办结',
          key: 'dbj',
          value: 0,
          color: '#FC6820',
        },
        {
          name: '超时',
          key: 'cs',
          value: 0,
          color: '#FC2020',
        },
        {
          name: '今日新增',
          key: 'jrxz',
          value: 0,
          color: '#FCB720',
        },
        {
          name: '今日办结',
          key: 'jrbj',
          value: 0,
          color: '#FFFFFF',
        },
      ],
      data: {},
    };
  },
  computed: {
    areaCode() {
      const { area_code } = useUserInfoStore();
      return area_code;
    },
  },
  watch: {
    areaCode: {
      immediate: true,
      handler() {
        this.getEventStatusCountAsync();
        this.getJrsjCountAsync();
      },
    },
  },
  methods: {
    async getEventStatusCountAsync() {
      const params = { area_code: this.areaCode };
      if (!params.area_code) {
        return;
      }
      const res = await this.$axios.get('/xw-microservice/xw-analysis/v3/event/count/state', {
        params,
      });
      if (res.code === 200) {
        this.data = Object.assign({}, this.data, {
          dcl: res.data.dcl,
          clz: res.data.clz,
          dbj: res.data.dbj,
          cs: res.data.cs,
        });
      } else {
        console.error('请求事件状态统计失败：' + res.msg);
      }
    },
    async getJrsjCountAsync() {
      const params = { area_code: this.areaCode };
      if (!params.area_code) {
        return;
      }
      const res = await this.$axios.get('/xw-microservice/xw-analysis/v3/event/count/state/today', {
        params,
      });
      if (res.code === 200) {
        this.data = Object.assign({}, this.data, {
          jrxz: res.data.Xz,
          jrbj: res.data.Bj,
        });
      } else {
        console.error('请求今日事件新增/办结统计失败：' + res.msg);
      }
    },
    showEventList() {
      /*dialog({
        content: () => import('@/views/wise-governance/components/event-list-dialog.vue'),
        dialogProps: {
          title: '事件列表',
          width: '1300px',
          bodyStyle: { height: '730px' },
        },
      });*/
    },
  },
};
</script>

<style scoped lang="less">
.overview-info {
  .con-center {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  p {
    margin: 0;
    line-height: 1;
  }
  .flex-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;

    & > div {
      flex: auto;
      width: 100%;
      text-align: left;
    }
  }
  .value {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
  }
  .name {
    font-size: 14px;
    font-weight: 400;
    color: #c6c6c6;
  }
}
</style>
